<template>
    <div id="v-center-b">
        <div class="tab-s">
            <div class="scroll">
                <table class="table-1">
                    <tr>
                        <th class="td-1">设备名称</th>
                        <th class="td-2">设备位置</th>
                        <th class="td-3">报警等级</th>
                        <th class="td-4">现场图片</th>
                        <th class="td-5">现场视频</th>
                    </tr>
                </table>
                <list-scroll v-if="dataList.length !== 0" class="box" :speed="0.3">
                    <div class="list">
                        <div class="item-s" v-for="(item,index) in dataList" :key="index">
                            <div class="item-s-c td-1" style="padding-left: 15px;"> {{ item.name }} </div>
                            <div class="item-s-c td-2"> {{ item.location }} </div>
                            <div class="item-s-c td-3"> {{ item.level }} </div>
                            <div class="item-s-c td-4" @click="imgClick(item.img)"> <img :src="item.img" /> </div>
                            <div @click="videoClick(item.video)" class="item-s-c td-5"> <img :src="item.video" /> </div>
                        </div>
                    </div>
                </list-scroll>
                <div v-else style="width: 100%; text-align: center;padding: 20px 0;color: #A3A6AD;">暂无数据</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import riskBg from '../../../image/video_cover.jpg';
import vidoeImg from '../../../image/video.png';
import ListScroll from './components/listScroll.vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
    name:'v-center-b',
    components: {
        ListScroll,
    },
    setup(props){
        const dataList = ref([
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
            // {name:'豪鹏三楼2号位相机豪鹏三楼2号位相机豪鹏三楼2号位相机',location:'豪鹏三楼',time: '2022-09-27',info:'未戴安全帽',type:'安全帽异常',level:'非常严重',img:riskBg,video:vidoeImg},
        ])

        /*** imgClick 图片点击事件 */
        const imgClick = (val:any) => {
            // console.log(val,'图片地址')
            ElMessage({
                message: '暂无图片地址',
                type: 'warning',
            })
        }

        /*** videoClick 视频点击事件 */
        const videoClick = (val:any) => {
            // console.log(val,'视频地址')
            ElMessage({
                message: '暂无视频地址',
                type: 'warning'
            })
        }
        return {
            dataList,
            imgClick,
            videoClick,
        }
    }
})
</script>
<style lang="scss" scoped>
#v-center-b{
    width: 100%;
    height: 100%;
    .tab-s{
        width: 90%;
        height: 72%;
        margin: 6vh auto 0 auto;
        overflow: hidden;
        .table-1{
            position: relative;
            width: 100%;
            text-align: center;
            background: rgba(14 , 54 , 110 , 1);
            z-index: 1;
            th{
                text-align: center;
            }
        }

        .td-1,.td-2,.td-3{
            width: 20%;
            height: 30px;
            line-height: 30px;
        }
        .td-4,.td-5{
            width: 20%;
            img{
                width: 20px;
                height: 20px;
                margin-top: 5px;
            }
        }
        .box {
            height: 300px;
            .list {
                width: 100%;
                .item-s {
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
                    color: rgb(21,136,170);
                    table-layout:fixed;
                    border-bottom: 1px solid rgb(21,136,189);
                    .item-s-c{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>